<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>组织冒泡事件-商品列表</title>
    <link rel="stylesheet" href="../c5/示例.css">
</head>

<body>
     <div class="container">
         <div class="goods">
             <img src="./img/葡萄.jpg">
                 <div class="tit">
                     <span>新疆葡萄</span>
                     <span>$9.00/斤</span>
                    <img id="h" src="./img/心.png">
                   <img id="hf" style="display: none;" src="./img/白心.png">
                </div>
             </div>
        </div>
</body>
<script src="../jquery-3.6.3.js"></script>
<script>
    //监控页面加载
    $(document).ready(function () {
        $(".goods").click(function(e){
            location.href = "./7号作业.html"
        })
        /**两张图片切换效果
         * 第一步：写两个图片 第二个图片样式隐藏
         * 第二步；点击第一个图片，把第一个图片隐藏 第二个图片显示
        */
       
        $("#h").click(function (e) {
            $("#h").hide();
            $("#hf").show();
            e.stopPropagation();
        })
        $("#hf").click(function (e) {
            $("#hf").hide();
            $("#h").show();
            e.stopPropagation();
        })

    })
</script>

</html>